 <template>
          <div class="crumbs">
            <el-breadcrumb separator="/">
                <h3 style="color #DDDDDD">当前位置:教师录入课程信息</h3>
            </el-breadcrumb>
        </div>

<el-button  class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
         @click="open">添加</el-button>
<el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="dialogVisible = true"
      >批量导入</el-button>
<el-dialog title="新增" v-model="dialogFormVisible">
	<el-form :model="form" :rules="addFormRules" ref="addFormRef">
	    <el-form-item label="专业" label-width="100px">
	        <el-input v-model="form.zy"/>
	    </el-form-item>
	</el-form>
	<el-form :model="form">
	    <el-form-item label="年级" label-width="100px">
	        <el-input v-model="form.nj"/>
	    </el-form-item>
	</el-form>
	<el-form :model="form">
	    <el-form-item label="考试科目" label-width="100px">
	        <el-input v-model="form.kskm"/>
	    </el-form-item>
	</el-form>
	<el-form :model="form">
	    <el-form-item label="真实人数" label-width="100px">
	        <el-input v-model="form.zsrs"/>
	    </el-form-item>
	</el-form>
	<el-form :model="form">
	    <el-form-item label="试卷页数" label-width="100px">
	        <el-input v-model="form.sjys"/>
	    </el-form-item>
	</el-form>
	<el-form :model="form">
	    <el-form-item label="任课老师1与班级" label-width="100px">
	        <el-input v-model="form.rkls1"/>
	    </el-form-item>
	</el-form>
	<el-form :model="form">
	    <el-form-item label="任课老师2与班级" label-width="100px">
	        <el-input v-model="form.rkls2"/>
	    </el-form-item>
	</el-form>
	<el-form :model="form">
	    <el-form-item label="备注" label-width="100px">
	        <el-input v-model="form.bz"/>
	    </el-form-item>
	</el-form>
	<div class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="submitCheck()">确 定</el-button>
	</div>
	
	
</el-dialog>
    <el-table
      :data="tableData"
      style="width: 100%">
<!--      <el-table-column  
        prop="id"
        label="序号"
        width="250">
      </el-table-column> -->
      <el-table-column  
        prop="zy"
        label="专业"
        width="250">
      </el-table-column>
      <el-table-column
        prop="nj"
        label="年级"
        width="250"
        >
      </el-table-column>
        <el-table-column
        prop="kskm"
        label="考试科目"
        width="250"
        >
      </el-table-column>
       <el-table-column
        prop="zsrs"
        label="真实人数"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="sjys"
        label="试卷页数"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="rkls1"
        label="任课老师1与班级"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="rkls2"
        label="任课老师2与班级"
        width="250"
        >
      </el-table-column>
      <el-table-column
        prop="bz"
        label="备注"
        width="250"
        >
      </el-table-column>
    <el-table-column
    prop="operation"
    label="操作"
     width="250">
    <template #default="scope">
    
        <el-button type="primary" @click="updateId(scope.row)">编辑</el-button>
        <el-button type="danger" @click="deleteID(scope.row)">删除</el-button>
    </template>
    </el-table-column>
    </el-table>
    <el-pagination
    background
  layout="prev, pager, next"
  :page-size="currentPage.page"
  :total="currentPage.total"
  :page-count="currentPage.count"
  :current-page="currentPage.current"
  @current-change="getpage">
  >
</el-pagination>
<el-dialog title="批量导入" v-model="dialogVisible">
            <el-form-item >
            选择Excel:
                 <upload-excel-component  :on-success="handleSuccess" :before-upload="beforeUpload" />
            </el-form-item>
        </el-dialog>
</template>
<script>
  import{fetchData,add,deleteLu} from '../api/index.js'
  import UploadExcelComponent from '../components/UploadExcel/index.vue'
    export default {
		components: { UploadExcelComponent },
        created(){
           this.getdata(this.currentPage);
        },
        methods: {
			beforeUpload(file) {
			    console.log(file)
			  const isLt1M = file.size / 1024 / 1024 < 1
			  if (isLt1M) {
			    return true
			  }
			  this.$message({
			    message: 'Please do not upload files larger than 1m in size.',
			    type: 'warning'
			  })
			  return false
			},   
			open() {
			    this.dialogFormVisible = true;
			    this.form.Id=0;
			    this.titles='添加'
			},
			deleteID(row) {
				this.$confirm('确认删除?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					deleteLu(row).then(Object => {
					this.getdata(this.currentPage);
					
					})
				  this.$message({
					type: 'success',
					message: '删除成功!'
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},
			updateId(row) {
				this.form = row;
				this.dialogFormVisible = true;
				this.titles = '编辑';
			},
			//成功
			 handleSuccess({ results, header }) {
				 
				var a=[];
				var w = {};
				for(var i=0;i<results.length;i++){
						 var x = JSON.parse(JSON.stringify(results[i]).replace(/序号/g,"id"));
						 var y = JSON.parse(JSON.stringify(x).replace(/专业/g,"zy"));
						 var z = JSON.parse(JSON.stringify(y).replace(/年级/g,"nj"));
						 var q = JSON.parse(JSON.stringify(z).replace(/考试科目/g,"kskm"));
						 var e = JSON.parse(JSON.stringify(q).replace(/真实人数/g,"zsrs"));
						 var r = JSON.parse(JSON.stringify(e).replace(/试卷页数/g,"sjys"));
						 var t = JSON.parse(JSON.stringify(r).replace(/任课老师1与班级/g,"rkls1"));
						 var u = JSON.parse(JSON.stringify(t).replace(/任课老师2与班级/g,"rkls2"));
						 w = JSON.parse(JSON.stringify(u).replace(/备注/g,"bz"));
						 
						 add(w).then(Object => {
							 this.getdata(this.currentPage);
							 this.dialogFormVisible = false;
						 })
						 
				}
				this.dialogVisible = false;
				this.$message({
				  message: '导入成功!',
				  type: 'success'
				});
			},
			
          submitCheck() {
              this.$refs.addFormRef.validate(valid => {
                  add(this.form).then(Object => {
                      this.getdata(this.currentPage);
                      this.dialogFormVisible = false;
                  })
              })
          
          },
          getpage(val){
            console.log(val)
            this.currentPage.page=val;
            this.getdata(this.currentPage);
          },
          getdata(val){
            fetchData(val).then(Object=>{
              this.tableData=Object.records[0];
                this.currentPage.total=Object.rowCount;
            })
			
          },
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                this.currentPage.current=currentPage;
                 this.getdata();  
            }
        },
        data() {
            return {
                total: null,
                tableData: null,
				dialogVisible:false,
				dialogFormVisible: false,
                currentPage:{
                  page: 1,
                  total: 20,
                  count: 50,
                  current: 0,
                  limit: 10
                },
				form: {
				    Id:0,
				    zy: '',
				    nj: '',
				    kskm: '',
				    zsrs: '',
				    sjys: '',
				    rkls1: '',
					rkls2: '',
					bz: '',
				},
            }
        }
    }
</script>
